﻿@using Sohobloo.SoPermission.Web.Models
@model GroupViewModel

<h2>Group</h2>
<p>
    <button id="btnGroupOpenAdd" type="button">Add</button>
</p>
<table id="tblGroupList">
    <tr>
        <td>
            <img src="~/Images/loading.gif" width="64" height="64" alt="loading..." />
        </td>
    </tr>
</table>


@section scripts
{
    <script>
        var $deletingRow;

        $(function() {
            $('#btnGroupOpenAdd').button({
                    icons: {
                        primary: 'ui-icon-plus'
                    }
                })
                .on('click', GroupOpenAdd);

            GroupList();
        });

        function GroupList() {
            $.ajax({
                url: '@Url.Action("List")',
                type: 'post',
                success: function(data) {
                    var $tblGroupList = $('#tblGroupList tbody').html(data);

                    $tblGroupList.find('input:checkbox').iCheck({
                        checkboxClass: 'icheckbox_square-blue',
                        radioClass: 'iradio_square-blue',
                        increaseArea: '20%' // optional
                    });

                    $tblGroupList.find('button[name=Delete]').button({
                            icons: {
                                primary: 'ui-icon-trash'
                            }
                        })
                        .on('click', function() {
                            var $self = $(this);
                            $deletingRow = $self.parent().parent();
                            var id = $self.siblings('input:hidden').val();
                            $.ajax({
                                url: '@Url.Action("Delete")',
                            type: 'post',
                            dataType: 'script',
                            data: { groupId: id }
                        });
                    });

                    $tblGroupList.find('button[name=Edit]').button({
                            icons: {
                                primary: 'ui-icon-pencil'
                            }
                        })
                        .on('click', function() {
                            var id = $(this).siblings('input:hidden').val();
                            GroupOpenEdit(id);
                        });
                }
            });
        }

        function GroupOpenAdd() {
            $('<div id="divGroupAdd" title="Add Group"></div>')
                .appendTo('body')
                .dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        Save: function() {
                            $(this).find('form').trigger('submit');
                        },
                        Cancel: function() {
                            $(this).dialog('close');
                        }
                    },
                    show: {
                        effect: 'drop',
                        direction: 'left'
                    },
                    hide: {
                        effect: 'drop',
                        direction: 'right'
                    },
                    width: 400,
                    height: 480,
                    dragStart: function() {
                        $(this).parent().fadeTo('fast', 0.7);
                    },
                    dragStop: function() {
                        $(this).parent().fadeTo('fast', 1);
                    },
                    open: function() {
                        $('.ui-widget-overlay').on('click', function() {
                            $('#divGroupAdd').prev('.ui-dialog-titlebar').effect('highlight');
                        });
                    },
                    close: function() {
                        $(this).remove();
                    }
                });

            $.ajax({
                url: '@Url.Action("OpenAdd")',
                type: 'get',
                success: function(data) {
                    $('#divGroupAdd').html(data)
                        .dialog('option', 'position', {
                            my: "center",
                            at: "center",
                            of: window
                        })
                        .dialog('open');

                    $('#Enabled').iCheck({
                        checkboxClass: 'icheckbox_square-blue',
                        radioClass: 'iradio_square-blue',
                        increaseArea: '20%' // optional
                    });
                }
            });
        }

        function GroupOpenEdit(groupId) {
            $('<div id="divGroupEdit" title="Edit Group"></div>')
                .appendTo('body')
                .dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        Save: function() {
                            $(this).find('form').trigger('submit');
                        },
                        Cancel: function() {
                            $(this).dialog('close');
                        }
                    },
                    show: {
                        effect: 'drop',
                        direction: 'left'
                    },
                    hide: {
                        effect: 'drop',
                        direction: 'right'
                    },
                    width: 400,
                    height: 480,
                    dragStart: function() {
                        $(this).parent().fadeTo('fast', 0.7);
                    },
                    dragStop: function() {
                        $(this).parent().fadeTo('fast', 1);
                    },
                    open: function() {
                        $('.ui-widget-overlay').on('click', function() {
                            $('#divGroupEdit').prev('.ui-dialog-titlebar').effect('highlight');
                        });
                    },
                    close: function() {
                        $(this).remove();
                    }
                });

            $.ajax({
                url: '@Url.Action("OpenEdit")',
                type: 'post',
                data: {
                    groupId: groupId
                },
                success: function(data) {
                    $('#divGroupEdit').html(data)
                        .dialog('option', 'position', {
                            my: "center",
                            at: "center",
                            of: window
                        })
                        .dialog('open');

                    $('#Enabled').iCheck({
                        checkboxClass: 'icheckbox_square-blue',
                        radioClass: 'iradio_square-blue',
                        increaseArea: '20%' // optional
                    });
                }
            });
        }

        function GroupAdded() {
            noty({
                layout: 'bottom',
                type: 'success',
                timeout: 3000,
                closeWith: ['click', 'button'],
                text: 'Success'
            });

            $('#divGroupAdd').dialog('close');
            GroupList();
        }

        function GroupUpdated() {
            noty({
                layout: 'bottom',
                type: 'success',
                timeout: 3000,
                closeWith: ['click', 'button'],
                text: 'Success'
            });

            $('#divGroupEdit').dialog('close');
            GroupList();
        }

        function GroupDeleted() {
            noty({
                layout: 'bottom',
                type: 'success',
                timeout: 3000,
                closeWith: ['click', 'button'],
                text: 'Success'
            });

            if ($deletingRow) {
                $deletingRow.effect('fade', function() {
                    GroupList();
                });
            }

            $deletingRow = null;
        }

        function AlertError(content) {
            noty({
                layout: 'bottom',
                type: 'error',
                timeout: 3000,
                closeWith: ['click', 'button'],
                text: content
            });
        }
    </script>
}